<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import reqApis from '../../../req/reqApis.js';

const router = useRouter();

const currentData = ref<any>({
  shopCollectBool: false,
  shopId: router.currentRoute.value.query.shopId,
  shopInfo: {}
});

const getShopFn = () => {
  let params = {
    shopId: currentData.value.shopId
  };
  reqApis.getShopApi(params).then((res:any) => {
    currentData.value.shopInfo = res.data;
  })
};

const saveShopCollectFn = (shopId: any) => {
  reqApis.saveShopCollectApi({shopId: shopId}).then((res:any) => {
    currentData.value.shopCollectBool = true;
    currentData.value.shopInfo.fansNum += 1;
  })
};

const cancelShopCollectFn = (shopId: any) => {
  reqApis.cancelShopCollectApi({shopId: shopId}).then((res:any) => {
    currentData.value.shopCollectBool = false;
    currentData.value.shopInfo.fansNum -= 1;
  })
};

const hasShopCollectFn = (shopId: any) => {
  reqApis.hasShopCollectApi({shopId: shopId}).then((res:any) => {
    currentData.value.shopCollectBool = res.data;
    
  })
};
const shopCollect = () => {
  if(currentData.value.shopCollectBool) {
    cancelShopCollectFn(currentData.value.shopId);
  }else{
    saveShopCollectFn(currentData.value.shopId);
  }
}

const toRouter = () => {
  router.push({path:"/searchList", query: {shopId: currentData.value.shopInfo.shopId}})
}
hasShopCollectFn(currentData.value.shopId);
getShopFn();

</script>
<template>
  <section class="shopHeaderUtil">
    <div class="shop-title">
      <div class="logo" :style="{background: `url(${currentData.shopInfo.shopLogo})no-repeat center #fff`}"></div>
      <div class="name-wrap">
        <div class="name">{{currentData.shopInfo.shopName}}</div>
        <div class="follow">{{currentData.shopInfo.fansNum}}关注</div>
      </div>
      <div class="btn-wrap" @click="shopCollect()"><div class="follow-btn" :class="{'active': currentData.shopCollectBool}"><i></i>关注</div></div>
    </div>
    <div class="search" @click="toRouter()"><i></i>搜索本店商品</div>
  </section>
</template>

<style lang="less" scoped>
.shopHeaderUtil {
  width: 3.75rem;
  margin-bottom: .1rem;
  .shop-title {
    height: .7rem;
    padding: .2rem .1rem .1rem;
    box-sizing: border-box;
    display: flex;
    margin-bottom: .1rem;
    .btn-wrap {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .follow-btn {
        width: .6rem;
        height: .26rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #a88f8f;
        &.active {
          background: #e93b3d;
        }
        font-size: 12px;
        color: #fff;
        border-radius: .5rem;
        i {
          width: .15rem;
          height: .15rem;
          background: url("../../../assets/images/star-icon-1.png") no-repeat left top;
          background-size: cover
        }
      }
    }
    
    .logo {
      width: .5rem;
      height: .5rem;
      background-size: cover!important;
      margin-right: .1rem;
    }
    .name-wrap {
      display: flex;
      flex-direction: column;
      justify-content: center;
      .name {
        font-size: .16rem;
        font-weight: 700;
        line-height: .21rem;
        color: #fff;
        margin-bottom: .05rem;
      }
      .follow {
        font-size: .1rem;
        height: .16rem;
        color: #fff;
      }
    }
  }
  .search {
    width: 3.55rem;
    height: .3rem;
    display: flex;
    align-items: center;
    background: #f7f7f7;
    border-radius: .3rem;
    margin: 0 auto;
    font-size: .14rem;
    color: #999;
    padding: 0 .1rem;
    box-sizing: border-box;
    i {
      width: .2rem;
      height: .2rem;
      background: url("../../../assets/images/search-icon-1.png") no-repeat center;
      background-size: 80%;
      margin-right: .05rem;
    }
  }
}
</style>

